<template>
	<view>
		<u-cell-group>
			<u-cell :isLink="true" title="头像" @click="updateAvatar">
				<u-avatar slot="value" style="position: relative;" size="50" :src="avatar">
				</u-avatar>
			</u-cell>
			<u-cell :isLink="true" title="昵称" value="用户名" @click="nameShow = true">
			</u-cell>
			<u-cell :isLink="true" title="性别" value="男" @click="sexShow = true">
			</u-cell>
			<u-cell :isLink="true" title="居住地" value="111" @click="liveShow = true">
			</u-cell>
			<u-cell :isLink="true" title="出生日期" value="1999-99-99" @click="dateShow=true">
			</u-cell>
			<u-cell title="电话号码" value="11111111111">
			</u-cell>
			<u-cell title="通讯录" value="1212122112">
			</u-cell>
			<u-cell :isLink="true" title="个性签名" value="" @click="signature=true">
			</u-cell>
			<u-cell :isLink="true" title="二维码">
				<u-icon slot="value" size="20" name="scan"></u-icon>
			</u-cell>
		</u-cell-group>
		<!-- 修改昵称 -->
		<u-modal :show="nameShow" title="修改昵称" :showCancelButton="true" @cancel="nameShow = false">
			<view class="slot-content">
				<u-input></u-input>
			</view>
		</u-modal>
		<!-- 性别 -->
		<u-picker @cancel="sexShow = false" :show="sexShow" :columns="sexList"></u-picker>
		<!-- 居住地 -->
		<u-picker :show="liveShow" :columns="liveList" @cancel="liveShow = false" @change="liveHandler"></u-picker>
		<!-- 出生日期 -->
		<u-datetime-picker :show="dateShow" v-model="dateValue" :minDate="-1577952000000" :maxDate="dateValue"
			mode="date" @cancel="dateShow=false"></u-datetime-picker>
		<!-- 个性签名 -->
		<u-modal :show="signature" title="修改签名" :showCancelButton="true" @cancel="signature = false">
			<view class="slot-content">
				<u-input></u-input>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
				nameShow: false,
				sexShow: false,
				sexList: [
					['男', '女']
				],
				liveShow: false,
				liveList: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
				liveListData: [
					['深圳', '厦门', '上海', '拉萨'],
					['得州', '华盛顿', '纽约', '阿拉斯加']
				],

				// 个性签名
				signature: false,
				dateShow: false,
				dateValue: Number(new Date()),
			}
		},
		methods: {
			// 头像
			updateAvatar() {
				uni.chooseImage({
					count: 1, //限制最大上传图片数量
					sizeType: ['original', 'compressed'], //图片压缩还是原图
					success: (res) => {
						//图片选择成功的回调
						//res中返回一个图片本地的临时地址
						console.log(res.tempFilePaths[0])
						this.avatar = res.tempFilePaths[0];
					}
				})
			},
			// 性别
			liveHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.liveListData[index])

				}
			}
		}
	}
</script>

<style></style>
